<template>
    <div class="login-bg">
        <div class="login-border">
            <h1>欢迎登录</h1>
            <span class="space"></span>
            <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
                <el-form-item prop="name">
                    <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.name" auto-complete="off"
                        placeholder="请输入用户名或邮箱">
                        <i slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
                        auto-complete="off" placeholder="请输入密码">
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
                        <i slot="prefix" class="el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {
        setToken,
        setUid,
        removeToken,
        getToken
    } from '../util/auth'
    export default {
        name: 'userlogin',
        inject: ['reload'],
        data() {
            return {
                loginForm: {
                    name: '',
                    password: ''
                },
                checked: false,
                loginRules: {
                    name: [{
                        required: true,
                        message: '请输入用户名或邮箱',
                        trigger: 'blur'
                    }],
                    password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            message: '密码长度最少为6位',
                            trigger: 'blur'
                        }
                    ]
                },
                passwordType: 'password'
            }
        },
        created() {
            if (localStorage.getItem('zhihuUserInfo') && localStorage.getItem('zhihuUserInfo') !== 'null' && getToken()) {
                const zhihuUserInfo = JSON.parse(localStorage.getItem('zhihuUserInfo'))
                // 用户类型【0=管理员，1=普通用户】
                this.$router.push({ path: '/main' })
                if (zhihuUserInfo.user_type === 0) {
                    let routerUrl = this.$router.resolve({
                        path: "/admin"
                    });
                    window.open(routerUrl.href, '_blank');
                } else if (zhihuUserInfo.user_type === 1) {
                    this.$router.push({
                        path: '/customer'
                    })
                }
            }
        },
        methods: {
            showPassword() {
                this.passwordType === '' ?
                    (this.passwordType = 'password') :
                    (this.passwordType = '')
            },
            handleLogin() {
                const _this = this
                const fullscreenLoading = this.$loading({
                    lock: true,
                    text: '登录中',
                    spinner: 'el-icon-loading'
                })
                _this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        _this.axios.post(_this.$API.ZHIHUAPI.signIn, _this.qs.stringify(_this.loginForm)).then(
                            (res) => {
                                // console.log(res)
                                fullscreenLoading.close()
                                res = res.data
                                if (res.code === '10000' || res.code === 10000) {
                                    _this.$message({
                                        showClose: false,
                                        message: '登录成功',
                                        type: 'success'
                                    })
                                    localStorage.setItem('zhihuUserInfo', JSON.stringify(res.data))
                                    setToken(res.data.token)
                                    setUid(res.data.id)
                                    setTimeout(() => {
                                        this.$router.push({
                                            path: '/main'
                                        })
                                        _this.reload()
                                    }, 1500)
                                    // 用户类型【0=超管，1=普通用户】
                                    /* if (res.data.user_type === 0) {
                                        console.log(res.data.user_type)
                                        // this.$router.push({ path: '/admin' })
                                        let routerUrl = this.$router.resolve({
                                            path: "/admin"
                                        });
                                        window.open(routerUrl.href, '_blank');
                                    } else if (res.data.user_type === 1) {
                                        this.$router.push({
                                            path: '/'
                                        })
                                    } */
                                } else {
                                    localStorage.setItem('zhihuUserInfo', null)
                                    removeToken()
                                    _this.$message({
                                        showClose: false,
                                        message: res.message,
                                        type: 'error'
                                    })
                                }
                            }).catch(() => {
                            fullscreenLoading.close()
                            _this.$message({
                                showClose: false,
                                message: '网络连接失败，请重试！',
                                type: 'error'
                            })
                            localStorage.setItem('zhihuUserInfo', null)
                            removeToken()
                        })
                    } else {
                        fullscreenLoading.close()
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .login-bg {
        height: 100%;
    }

    .login-border {
        width: 20rem;
        position: absolute;
        top: 40%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 70px 36px;
        text-align: center;
        background: #fff;
        border: 1px solid #4285F4;
        border-radius: 5px;
        box-shadow: 2px 4px 10px 2px #4285F4;
    }

    .login-border h1 {
        height: 42px;
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 42px;
        margin: 0;
        margin-bottom: 50px;
        letter-spacing: 4px;
    }

    .login-submit {
        margin-top: 43px;
        width: 100%;
        height: 44px;
        background: #4285F4;
        box-shadow: 0px 5px 10px 0px rgba(66, 133, 244, 0.5);
        border-radius: 4px;
        font-size: 20px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 44px;
        padding: 0 18px;
        white-space: nowrap;
        text-align: center;
        border: none;
        cursor: pointer;
        letter-spacing: 8px;
    }
</style>
